/* =============================================================
   contact.css — Contact Us page styles
   All rem values: rem = figma_px / 19
   Base: 19px → scaled via global.css media queries
   ============================================================= */

/* ---------------------------------------------------------------
   1. HERO / REQUEST A QUOTE SECTION
--------------------------------------------------------------- */
.ct-hero-section {
  padding-top: 9.474rem;  /* 180px / 19 — accounting for navbar */
  padding-bottom: 4.211rem; /* 80px / 19 */
  text-align: center;
  background-color: var(--bg-white);
}

.ct-hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.895rem; /* 36px / 19 */
  width: 89.5625rem; /* 1080px / 19 */
  margin-left: auto;
  margin-right: auto;
}

.ct-hero-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 2.895rem; /* 55px / 19 */
  line-height: 1.2;
  color: var(--base-dark);
  letter-spacing: -0.03em;
}

.ct-hero-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.947rem; /* 18px / 19 */
  line-height: 1.789rem; /* 34px / 19 */
  color: var(--text-sub);
  text-align: center;
  max-width: 85.52rem;
}


/* ---------------------------------------------------------------
   2. ENQUIRIES — "Tell us why you're here" card grid
--------------------------------------------------------------- */
.ct-enquiry-section {
  background-color: var(--bg-white);
  padding-top: 1.5rem;
  padding-bottom: 5.263rem; /* 100px / 19 */
}

.ct-enquiry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.351rem; /* ~25.66px / 19 */
}

.ct-enquiry-card {
  position: relative;
  background-color: #fff;
  border: 0.052rem solid var(--border-gray);
  border-radius: 0.727rem; /* 13.8px / 19 */
  box-shadow: 0 0.208rem 0.416rem rgba(113, 75, 103, 0.05);
  padding: 2.316rem 2.128rem 2.105rem; /* top/side ~ 44/40px, bottom 40px */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ct-enquiry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(8, 75, 129, 0.09);
  border-color: var(--primary-blue);
}

.ct-enquiry-badge {
  position: absolute;
  top: 0.421rem; /* 8px / 19 */
  right: 0.421rem;
  padding: 0.421rem 0.526rem; /* 8px 10px */
  border-radius: 0.211rem; /* 4px */
  border: 0.052rem solid;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.716rem; /* ~13.6px / 19 */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #101828;
  white-space: nowrap;
}

.ct-badge-blue   { background-color: #dbeafe; border-color: #99d2ff; }
.ct-badge-green  { background-color: #dbfee0; border-color: #42db59; }
.ct-badge-yellow { background-color: #fefedb; border-color: #ffe681; }
.ct-badge-orange { background-color: #ffedd4; border-color: #ffbb5d; }
.ct-badge-cyan   { background-color: #dbfafe; border-color: #00b5cd; }
.ct-badge-pink   { background-color: #ffe8fd; border-color: #ff9af6; }

.ct-enquiry-icon {
  width: 3.844rem; /* ~73px / 19 */
  height: 3.844rem;
  border-radius: 1.59756rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.421rem; /* 27px / 19 */
}

.ct-enquiry-icon svg {
  width: 2.0225rem;
  height: 2.0225rem;
  flex-shrink: 0;
}

.ct-icon-blue   { background-color: #dbeafe; }
.ct-icon-green  { background-color: #dbfee0; }
.ct-icon-yellow { background-color: #fefedb; }
.ct-icon-orange { background-color: #ffedd4; }
.ct-icon-cyan   { background-color: #dbfafe; }
.ct-icon-pink   { background-color: #ffe8fd; }

.ct-enquiry-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.454rem; /* ~27.6px / 19 */
  line-height: 1.3;
  color: #101828;
  margin-bottom: 0.632rem; /* 12px / 19 */
}

.ct-enquiry-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.987rem; /* ~18.75px / 19 */
  line-height: 1.345rem; /* ~25.5px / 19 */
  color: #363434;
  margin-bottom: 1.684rem; /* 32px / 19 */
  flex: 1;
}

.ct-enquiry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.632rem; /* 12px / 19 */
  margin-top: auto;
}

.ct-enquiry-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(165deg, #0a4e96 0%, #1e6fd9 100%);
  color: #fff;
  border-radius: 999px;
  padding: 0.632rem 1.105rem; /* 12px 21px */
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.831rem; /* ~15.8px / 19 */
  white-space: nowrap;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ct-enquiry-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 78, 150, 0.35);
}

.ct-enquiry-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.421rem; /* 8px / 19 */
  border: 0.052rem solid #96cefa;
  border-radius: 999px;
  padding: 0.632rem 1.105rem;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.831rem;
  color: #363434;
  white-space: nowrap;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.ct-enquiry-btn-outline:hover {
  background-color: #f0f7ff;
  border-color: var(--primary-blue);
  transform: translateY(-2px);
}


/* ---------------------------------------------------------------
   3. HOW IT WORKS SECTION
--------------------------------------------------------------- */
.ct-how-section {
  background-color: var(--bg-light);
  padding-top: 5.263rem; /* 100px / 19 */
  padding-bottom: 5.263rem;
}

.ct-section-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 2.263rem; /* 43px / 19 */
  line-height: 1.3;
  color: var(--base-dark);
  margin-bottom: 3.158rem; /* 60px / 19 */
}

.ct-steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.105rem; /* 40px / 19 */
}




/* ---------------------------------------------------------------
   4. CONNECT WITH US — SOCIAL MEDIA SECTION
--------------------------------------------------------------- */
.ct-social-section {
  background-color: var(--bg-white);
  padding-top: 5.789rem; /* 110px / 19 */
  padding-bottom: 5.789rem;
}

.ct-social-head {
  max-width: 30.316rem; /* 576px / 19 */
  margin: 0 auto 2.158rem; /* 41px / 19 */
  text-align: center;
}

.ct-social-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 2.526rem; /* 48px / 19 */
  line-height: 1.3;
  color: #101828;
  margin-bottom: 0.632rem;
}

.ct-social-subtitle {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1.053rem; /* 20px / 19 */
  line-height: 1.363rem;
  color: #6a7282;
}

.ct-social-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.316rem; /* 25px / 19 */
}

.ct-social-card {
  display: flex;
  flex-direction: column;
  gap: 1.316rem; /* 25px / 19 */
  background-color: #fff;
  border: 0.053rem solid #d7d7d7;
  border-radius: 0.632rem; /* 12px / 19 */
  padding: 1.105rem 1.211rem; /* 21px 23px */
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ct-social-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(8, 75, 129, 0.08);
  border-color: var(--primary-blue);
}

.ct-social-icon {
  width: 3.421rem; /* 65px / 19 */
  height: 3.421rem;
  border-radius: 0.632rem; /* ~12px */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ct-social-icon svg {
  width: 2.0225rem;
  height: 2.0225rem;
  flex-shrink: 0;
}

.ct-social-bg-blue  { background-color: #eff6ff; }
.ct-social-bg-pink  { background-color: #fdf2f8; }
.ct-social-bg-red   { background-color: #fef2f2; }
.ct-social-bg-gray  { background-color: #f3f4f6; }
.ct-social-bg-green { background-color: #f0fdf4; }

.ct-social-name {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.158rem; /* 22px / 19 */
  color: #101828;
  text-transform: capitalize;
}

.ct-social-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.947rem; /* 18px / 19 */
  line-height: 1.363rem;
  color: #363434;
  flex: 1;
}

.ct-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.211rem; /* 4px / 19 */
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.947rem; /* 18px / 19 */
  color: #008dff;
}

.ct-social-link svg {
  width: 0.842rem; /* 16px / 19 */
  height: 0.842rem;
  transition: transform 0.3s ease;
}

.ct-social-card:hover .ct-social-link svg {
  transform: translateX(3px) rotate(-45deg);
}


/* ---------------------------------------------------------------
   5. CONTACT US INFO SECTION
--------------------------------------------------------------- */
.ct-info-section {
  background-color: var(--bg-white);
  padding-top: 5.263rem; /* 100px / 19 */
  padding-bottom: 5.789rem; /* 110px / 19 */
  border-top: 0.053rem solid var(--border-gray);
}

/* Header row: title centered, email top-right absolute */
.ct-info-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 3.579rem; /* 68px / 19 */
}

.ct-info-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 3.211rem; /* 61px / 19 */
  line-height: 4.316rem; /* 82px / 19 */
  color: var(--base-dark);
  text-align: center;
}

.ct-info-email-block {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.263rem; /* 5px / 19 */
}

.ct-info-email-label {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.737rem; /* 14px / 19 — matches Figma small label */
  line-height: 1.2;
  color: var(--text-sub);
  text-transform: none;
  letter-spacing: 0;
}

.ct-info-email {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.158rem; /* 22px / 19 */
  color: var(--base-dark);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.ct-info-email:hover {
  color: var(--primary-blue);
}

/* Two-column body layout */
.ct-info-body {
  display: grid;
  grid-template-columns: 23.895rem 1fr; /* 454px and remaining */
  gap: 1.421rem; /* 27px / 19 */
  align-items: start;
}

/* Left: Address Column */
.ct-info-address-col {
  display: flex;
  flex-direction: column;
  gap: 0.842rem; /* 16px / 19 */
  width: 100%;
  max-width: 23.895rem; /* 454px */
}

.ct-info-country-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.579rem; /* 30px / 19 */
  line-height: 1.368rem; /* 26px / 19 */
  color: var(--base-dark);
}

.ct-info-flag-img {
  width: 100%;
  height: 7.368rem; /* 140px / 19 */
  overflow: hidden;
  background-color: #d9d9d9;
}

.ct-info-flag-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ct-info-address-text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1rem; /* 19px / 19 */
  line-height: 1.526rem; /* 29px / 19 */
  color: var(--base-dark);
  max-width: 22.632rem; /* 430px / 19 */
}

/* Right: Info Cards Grid */
.ct-info-cards-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.053rem 1.105rem; /* 20px vertical, 21px horizontal gap */
  width: 100%;
  max-width: 50.263rem; /* 955px */
}

.ct-info-card {
  background-color: #f5fcff;
  border: 0.053rem solid #cbcbcb; /* 1px border */
  height: 7.368rem; /* 140px / 19 */
  padding: 0 1.526rem; /* 29px left padding / 19 */
  display: flex;
  align-items: center;
  gap: 1.105rem; /* 21px / 19 */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
}

.ct-info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(8, 75, 129, 0.08);
  border-color: var(--primary-blue);
}

.ct-info-card-icon {
  width: 2.368rem; /* 45px / 19 */
  height: 2.368rem; /* 45px / 19 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Override global.css svg { max-width: 100%; height: auto } */
.ct-info-card-icon svg {
  width: 2.8125rem;
  height: 2.8125rem;
  flex-shrink: 0;
  display: block;
}

.ct-info-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon-only card variant (the mail card in Figma) */
.ct-info-card--icon-only {
  justify-content: center;
}

.ct-info-card--icon-only .ct-info-card-icon {
  width: 2.368rem;
  height: 2.368rem;
}

.ct-info-card--icon-only .ct-info-card-icon svg {
  width: 2.8125rem;
  height: 2.8125rem;
}

.ct-info-card-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ct-info-card-title {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1rem; /* 19px / 19 */
  line-height: 1.526rem; /* 29px / 19 */
  color: var(--base-dark);
}

.ct-info-card-value {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.158rem; /* 22px / 19 */
  line-height: 1.4;
  color: var(--base-dark);
}


/* ---------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
--------------------------------------------------------------- */
@media (max-width: 1200px) {
  .ct-enquiry-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ct-social-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .ct-steps-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.579rem;
  }

  .ct-info-body {
    grid-template-columns: 1fr;
    gap: 2.105rem;
  }

  .ct-info-address-col {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.105rem;
    max-width: 100%;
  }

  .ct-info-flag-img {
    max-width: 12rem;
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
  .ct-hero-title {
    font-size: 2.105rem;
  }

  .ct-enquiry-grid {
    grid-template-columns: 1fr;
  }

  .ct-social-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ct-steps-grid {
    grid-template-columns: 1fr;
    gap: 1.263rem;
  }

  .ct-info-cards-col {
    grid-template-columns: 1fr;
  }

  .ct-info-address-col {
    flex-direction: column;
    width: 100%;
  }

  .ct-info-flag-img {
    max-width: 100%;
    width: 100%;
  }

  .ct-info-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .ct-info-email-block {
    position: static;
    transform: none;
    align-items: flex-start;
  }
}

@media (max-width: 575px) {
  .ct-hero-section {
    padding-top: 7rem;
  }

  .ct-social-grid {
    grid-template-columns: 1fr;
  }

  .ct-enquiry-badge {
    position: static;
    display: inline-block;
    margin-bottom: 0.9rem;
  }

  .ct-enquiry-card {
    padding-top: 1.6rem;
  }
}